<!DOCTYPE html>


	<link href="/css/cloudbalance.css" rel="stylesheet" type="text/css" />

<!--  http://tutorialzine.com/2013/08/learn-angularjs-5-examples/ -->
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Angular Testing Services</title>
	<link rel="shortcut icon" href="../favicon.ico">
</head>
<body>

<style>

*{
	margin:0;
	padding:0;
}

body{
	font:15px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
	text-align:center;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside, nav{
	display: block;
}

/*-------------------------
	The search input
--------------------------*/

.bar{
	background-color:#5c9bb7;

	background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:linear-gradient(top, #5c9bb7, #5392ad);

	box-shadow: 0 1px 1px #ccc;
	border-radius: 2px;
	width: 580px;
	padding: 10px;
	margin: 45px auto 25px;
	position:relative;
	text-align:right;
	line-height: 1;
}

.bar a{
	background:#4987a1 center center no-repeat;
	width:32px;
	height:32px;
	display:inline-block;
	text-decoration:none !important;
	margin-right:5px;
	border-radius:2px;
	cursor:pointer;
}

.bar a.active{
	background-color:#c14694;
}

.bar a.list-icon{
	background-image:url();
}

.bar a.grid-icon{
	background-image:url();
}

.bar input{
	background:#fff no-repeat 13px 13px;

	border: none;
	width: 100%;
	line-height: 19px;
	padding: 11px 0;

	border-radius: 2px;
	box-shadow: 0 2px 8px #c4c4c4 inset;
	text-align: left;
	font-size: 14px;
	font-family: inherit;
	color: #738289;
	font-weight: bold;
	outline: none;
	text-indent: 40px;
}

/*-------------------------
	List layout
--------------------------*/

ul.list{
	list-style: none;
	width: 500px;
	margin: 0 auto;
	text-align: left;
}

ul.list li{
	border-bottom: 1px solid #ddd;
	padding: 10px;
	overflow: hidden;
}

ul.list li img{
	width:120px;
	height:120px;
	float:left;
	border:none;
}

ul.list li p{
	margin-left: 135px;
	font-weight: bold;
	color:#6e7a7f;
}

/*-------------------------
	Grid layout
--------------------------*/

ul.grid{
	list-style: none;
	width: 570px;
	margin: 0 auto;
	text-align: left;
}

ul.grid li{
	padding: 2px;
	float:left;
}

ul.grid li img{
	width:280px;
	height:280px;
	display:block;
	border:none;
}
</style>


<div ng-app="switchableGrid" ng-init="layout='list'" ng-controller="SwitchableGridTransactionController" >

	<div class="bar">

		<!-- These two buttons switch the layout variable,
			 which causes the correct UL to be shown. -->

		<a class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"></a>
		<a class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"></a>
	</div>

	<!-- We have two layouts. We choose which one to show depending on the "layout" binding -->

	<ul ng-show="layout == 'grid'" class="grid">
		<li ng-repeat="t in transactions">
				<div class="payee-type-i" style="float: left; display: table;  text-align: center;  margin: 0 auto;  ">
				<span  class="legend"  >{{t.amount}}</span>	
					<div style="font-size: 11px;height: 18px;width: 140px; "><b>Income</b></div>
			</div>
		</li>
	</ul>

	<ul ng-show="layout == 'list'" class="list">

				<table style="width:100%; 'border-collapse: collapse;">
					<thead style="display: none">
						<tr>
						    <th scope="col" style="border-left:0; width:15px"></th>
							<th scope="col">Date</th>
							<th scope="col">Payee</th>
							<th scope="col" style="text-align: right; padding-right:5px;">Amount</th>
							<th scope="col" style="text-align: right; padding-right:5px;">Balance</th>
							<th scope="col">Action</th>
						</tr>
					</thead>
					<tbody id="transaction-list-tbody">
							<tr ng-repeat="t in transactions">
								<td>{{t.date}}</td>
								<td>{{t.payee}}</td>
								<td>{{t.amount | currency}}</td>
								<td>{{t.balance | currency}}</td>
							</tr>
					</tbody>

	</ul>
	
	</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>

<script>


// Define a new module. This time we declare a dependency on
// the ngResource module, so we can work with the Transaction API

var app = angular.module("switchableGrid", ['ngResource']);

// Create and register the new "transaction" service
app.factory('transaction', function($http){

	return {
		fetchTransactions: function(callback){
			 $http({method: 'GET', url: '/cb/transaction'}).
			    success(function(data, status, headers, config) {
						callback(data.data);
			    }).
			    error(function(data, status, headers, config) {
			      alert('fail');
			    });
		}
	}
});

// The controller. Notice that I've included our instagram service which we
// defined below. It will be available inside the function automatically.

function SwitchableGridTransactionController($scope, transaction){

	// Default layout of the app. Clicking the buttons in the tcooolbar
	// changes this value.

	$scope.layout = 'grid';

	$scope.transactions = [];

	$scope.testing = function(e) {
		alert('testing');
	
		e.stopPropagation();
	
		
	};
	
	
	transaction.fetchTransactions(function(data){
	
	
		var balance = 0;
		for (var i=0;i<data.length;i++){
			var	amount = Number(data[i].amount);
			balance = balance + amount;
			data[i].balance = balance;
		}
		
		// Assigning the pics array will cause the view
		// to be automatically redrawn by Angular.
		$scope.transactions = data;
		
	
	});

}

</script>


</body>
</html>